<template>
  <el-dialog title="新增权限点" :visible="value" @close="close">
    <div>{{ editId }}</div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="form.enVisible"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addPermissionRequest, getPermissionByIdRequest, updatePermissionByIdRequest } from '@/api/permission'

export default {
  name: 'PermissonDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    sonData: {
      type: Object,
      default: () => {}
    },
    editId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      form: {
        name: '',
        code: '',
        description: '',
        // 数字或者字符串还有布尔值  默认都给null
        // type 如果添加的是页面权限，type =1 如果是按钮权限，type=2
        type: null,
        pid: null,
        enVisible: null
      },
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  watch: {
    editId(newV, oblV) {
      if (newV) {
        this.getPermissionById(newV)
      }
    }
  },
  created() {
    console.log(111111, '组件重新渲染')
    // if (this.editId) {
    //   this.getPermissionById(this.editId)
    // }
  },
  methods: {
    async getPermissionById(id) {
      const res = await getPermissionByIdRequest(id)
      this.form = res.data
    },
    submit() {
      // this.sonData.type = 10000
      // this.sonData.pid = 20000
      // this.sonData = {}
      this.$refs.formRef.validate(async(value) => {
        if (value) {
          this.loading = true
          try {
            // 这里是校验成功才会执行的代码片段， 发请求
            // 合并两个对象   Object.assign(目标对象, 后面很多对象)  展开运算符（不改变原始对象）

            if (this.form.id) {
              // 这里是编辑的时候 进入的if分支
              await updatePermissionByIdRequest(this.form)
            } else {
              await addPermissionRequest({ ...this.form, ...this.sonData })
            }

            this.close()
            // 刷新页面
            this.$emit('success')
          } catch (error) {
            //
          } finally {
            this.loading = false
          }
        }
      })
    },
    close() {
      this.$emit('input', false)
      // resetFields导致的一些问题
      this.$refs.formRef.resetFields()
      this.form = this.$options.data().form
    }
  }
}
</script>
